
import { useState,useEffect } from 'react';
import classnames from 'classnames'
import bg1 from '../../../assets/1.jpg'
import bg2 from '../../../assets/2.jpg'
import { useNavigate,useOutlet  } from 'react-router-dom';
import { useTranslation } from 'react-i18next';



const Item = ({ getId,type = 'OD', list }) => {
  const { t } = useTranslation()
  const token = localStorage.getItem('token')
  const [showInfo, setShowInfo] = useState('');
  const navigate = useNavigate();
  const handleNavigation = (id) => {
    getId(id)
    return
    navigate(type === 'SD' ? '/detail/SD' : type === 'OD' ? '/detail/OD' : '/hospitalDetail', { state: { id, type } });
  }

  return (
    <>
      {
        list.map((item, idx) => <div key={item.id} onMouseEnter={() => setShowInfo(idx)} onMouseLeave={() => setShowInfo('')} 
        className="w-40 sm:w-80 rounded-lg overflow-hidden relative shadow-lg transition-transform transform hover:scale-105 hover:shadow-xl">
          <div onClick={() => handleNavigation(item.id)}>
            <img src={item.photoFiles[0]?.url} className={classnames("w-full sm:h-96 h-52 transition-transform transform object-cover", showInfo === idx && 'scale-110')} />
            <div className={classnames("absolute bottom-0 left-0 w-full bg-black bg-opacity-80 text-white flex justify-center sm:p-4 p-2 sm:opacity-0 transition-opacity", showInfo === idx && 'sm:opacity-100')}>
              {type === 'OD' && <div>
                <p className="sm:text-[16px] text-[10px] font-semibold">{t('姓名')}：{item.name}</p>
                {/* <p className="text-sm">年龄：{item.age}</p> */}
                <p className="sm:text-[14px] text-[10px]">{t('身高')}：{item.height}</p>
                <p className="sm:text-[14px] text-[10px]">{t('血型')}：{item.blood}</p>
                {token && <p className="sm:text-[14px] text-[10px]">{t('价格')}：${item.price}</p>}
              </div>}
              {type === 'SD' && <div>
                <p className="text-left sm:text-[16px] text-[10px] font-semibold">{t('姓名')}：{item.name}</p>
                <p className="text-left sm:text-[14px] text-[10px]">{t('年龄')}：{item.age}</p>
                <p className="text-left sm:text-[14px] text-[10px]">{t('身高')}：{item.height}</p>
                <p className="text-left sm:text-[14px] text-[10px]">{t('血型')}：{item.blood}</p>
                {token && <p className="sm:text-[14px] text-[10px]">{t('价格')}：${item.price}</p>}
              </div>}
              {type === 'hospital' && <div className='flex items-center w-full justify-evenly'>
                <div className="w-10 sm:w-16">
                  <img src={item.photoFiles[0]?.url} className="w-full rounded" />
                </div>
                <div>
                  <p className="sm:text-[16px] text-[10px] font-semibold">{t('名称')}：{item.name}</p>
                  {token && <p className="sm:text-[14px] text-[10px]">{t('价格')}：${item.price}</p>}
                  <p className="sm:text-[14px] text-[10px]">{t('成功率')}：{item.successPercent}%</p>
                </div>
              </div>}
            </div>
          </div>
        </div>)
      }

    
    </>
  )
}

export default Item